<template>
  <d2-container>
    <div class="d2-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>数据面板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h2>数据面板</h2>
    <el-row :gutter="20" class="num-block">
      <el-col :span="6">
        <div class="grid-content">
          <p>园区成交额</p>
          <h4>{{ cardData.gardenAmount }}</h4>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p>园区分润</p>
          <h4>{{ cardData.profitAmount }}</h4>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p>企业数量</p>
          <h4>{{ cardData.enterNum }}</h4>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <p>新增园区数量</p>
          <h4>{{ cardData.gardenNum }}</h4>
        </div>
      </el-col>
    </el-row>

    <el-card shadow="never" class="card-box">
      <div class="title">
        <div class="tab-box">
          <div
            class="tab"
            @click="handleClick(0)"
            :class="activeName == 0 ? 'active-tag' : ''"
          >
            新增园区
          </div>
          <div
            class="tab"
            @click="handleClick(1)"
            :class="activeName == 1 ? 'active-tag' : ''"
          >
            园区新增企业
          </div>
        </div>
        <div class="block">
          <!-- <el-date-picker
            v-model="selechFrom.time"
            type="month"
            @change="dataChange"
            placeholder="选择月"
            format="yyyy-MM"
            value-format="yyyy-MM"
          ></el-date-picker> -->
          <el-date-picker
            v-model="selechFrom.time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="dataChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div id="charts" ref="charts" style="width: 100%; height: 600px"></div>
    </el-card>
  </d2-container>
</template>

<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      activeName: 0,
      info: {},
      charts: "",
      selechFrom: {
        time: "",
      },
      xAxis: [],
      yAxis: [],
      cardData: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab;
      this.searchCard();
    },
    /**
     * @dev 初始化图表
     */
    createCharts() {
      var myChart = echarts.init(this.$refs.charts);
      var option = {
        tooltip: {
          trigger: "axis",
        },

        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [],
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: [0],
          },
        ],
      };
      myChart.setOption(option);
      this.charts = myChart;
    },
    /**
     * @dev 获取图表数据并对图表进行填充
     */
    // getData() {
    //   let param = {
    //     CoinId: this.$route.params.id,
    //     Time: this.selechFrom.Time,
    //   };
    //   this.$axios.post("/stat/tie/charts", param).then((res) => {
    //     this.xAxis = res.date;
    //     this.yAxis = res.data;
    //     this.fillCharts();
    //   });
    // },
    /**
     * @dev 图表填充
     */
    fillCharts() {
      this.charts.setOption({
        xAxis: [
          {
            type: "category",
            data: this.xAxis,
          },
        ],
        series: [
          {
            type: "line",
            data: this.yAxis,
          },
        ],
      });
    },
    /**
     * @dev 日期切换
     */
    dataChange: function (val) {
      this.searchCard();
    },
    /**
     * @dev 时间处理
     */
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      month = month + 1;
      month = month.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}`;
      return defaultDate;
    },
    /**
     * @dev 查询卡片数据信息
     */
    searchCard() {
      let params = {
        type: this.activeName,
        startTime: this.selechFrom.time[0],
        endTime: this.selechFrom.time[1],
      };
      if (params.startTime) {
        params.startTime = new Date(
          Date.parse(new Date(params.startTime)) + 8 * 3600 * 1000
        );
      }
      if (params.endTime) {
        params.endTime = new Date(
          Date.parse(new Date(params.endTime)) + 8 * 3600 * 1000
        );
      }
      this.$axios.post("/sysGardenGrant/dataList", params).then((result) => {
        if (result) {
          this.cardData = {
            ...result.data,
          };
          this.xAxis = result.data.list.map((ele) => {
            return ele.dateTime;
          });
          this.yAxis = result.data.list.map((ele) => {
            return ele.num;
          });
          this.fillCharts();
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
  },
  mounted() {
    this.selechFrom.value = this.getNowTime();
    this.createCharts();
    // this.getData();
    this.searchCard();
  },
};
</script>

<style scoped lang="scss">
.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #dce2eb;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
}
.num-block {
  text-align: center;
  background: #f3f3f3;
  border-radius: 2px;
  margin-bottom: 25px;
  color: #666;
  .el-col {
    font-size: 20px;
    .grid-content {
      border-left: 1px dashed #c1c1c1;
      position: relative;
      .position-box {
        position: absolute;
        right: 30px;
      }
    }
    &:nth-of-type(1) {
      color: #409eff;
      .grid-content {
        border-left: 0;
      }
    }
    &:nth-of-type(2) {
      color: #67c23a;
    }
    &:nth-of-type(3) {
      color: #909399;
    }
    &:nth-of-type(4) {
      color: #f56c6c;
    }
  }
}
.tab-box {
  display: flex;
  align-items: center;
  .tab {
    padding: 5px 10px;
    border-bottom: solid 1px #dce2eb;
    margin: 0 10px;
    cursor: pointer;
  }
  .active-tag {
    color: #409eff;
    border-bottom: solid 1px #409eff;
  }
}
</style>
